<template>
    <div class="mmv-article-card">
        <!-- 头部 可隐藏 -->
        <template v-if="hideHeader===false">
            <div class="mmv-article-card__header">
                <div class="mmv-article-card__userinfo">
                    <mmvUserCard class="mmv-article-card__user"></mmvUserCard>
                    <p class="mmv-article-card__info">11-23</p>
                </div>
            </div>
        </template>
        <!-- 主体 -->
        <a class="mmv-article-card__link" href target="_blank">
            <div class="mmv-article-card__title">
                <mmvArticleType class="mmv-article-card__type"></mmvArticleType>
                <h3 class="mmv-article-card__h3" title="【有奖活动】砂糖生日快乐！参与活动赢周边奖励~">【有奖活动】砂糖生日快乐！参与活动赢周边奖励~</h3>
            </div>
            <div class="mmv-article-card__content">姆！旅行者们好呀~最近很多小丘丘人都不出来玩了，据说是天黑之后，荒野会出现可怕的猎骨魔女，专挑独自一丘的小丘丘人下手，把它的骨头拆掉，放进黑漆漆的口袋里带走~~不过酱酱才不会害怕呢，依然每天在外</div>
            <div class="mmv-article-card__preview">
                <div class="mmv-article-card__img mmv-article-card__single-img" data-pswp-uid="1" data-src="https://upload-bbs.mihoyo.com/upload/2020/11/27/75276539/f6782932882f074f02afb3d6ad42c7f0_3216954023911740105.jpg?x-oss-process=image/resize,s_300/quality,q_80/auto-orient,0/interlace,1/format,jpg" large="https://upload-bbs.mihoyo.com/upload/2020/11/27/75276539/f6782932882f074f02afb3d6ad42c7f0_3216954023911740105.jpg" lazy="loaded" preview="2849288" style="background-image: url(&quot;https://upload-bbs.mihoyo.com/upload/2020/11/27/75276539/f6782932882f074f02afb3d6ad42c7f0_3216954023911740105.jpg?x-oss-process=image/resize,s_300/quality,q_80/auto-orient,0/interlace,1/format,jpg&quot;);"></div>
            </div>
        </a>
        <!-- 脚部 -->
        <div class="mmv-article-card__footer">
            <mmvTopicLabelSelector class="mmv-article-card__topics"></mmvTopicLabelSelector>
            <div class="mmv-article-card__data">
                <div class="mmv-article-card__data-item">
                    <i class="mmv-icon iconfont icon-liulanshu"></i>
                    <span>9万+</span>
                </div>
                <a class="mmv-article-card__data-item" href target="_blank">
                    <i class="mmv-icon iconfont icon-liuyanshu"></i>
                    <span>2269</span>
                </a>
                <div class="mmv-article-card__data-item">
                    <div class="mmv-heart-click">
                        <svg class="mmv-symbol-icon mmv-heart-click__icon">
                            <use xlink:href="#icon-dianzanjiaohu" />
                        </svg>
                        <span>2579</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mmvArticleType from "@/components/mmv-article-type.vue";
import mmvUserCard from "@/components/mmv-user-card.vue";
import mmvTopicLabelSelector from "@/components/mmv-topic-label-selector.vue";

export default {
    components: {
        mmvArticleType,
        mmvUserCard,
        mmvTopicLabelSelector,
    },
    props: {
        hideHeader: false,
    },
};
</script>

<style lang="less">
.mmv-article-card {
    padding: 24px 30px;
    & + & {
        border-top: 1px solid #ebebeb;
    }
    &__header {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        position: relative;
    }
    &__userinfo {
        flex-grow: 1;
        display: flex;
        align-items: center;
        .mmv-account-title__name {
            font-size: 12px;
        }
        .mmv-account-title__level {
            height: 12px;
        }
    }
    &__avatar {
        flex-shrink: 0;
    }
    &__user {
        display: flex;
        align-items: center;
    }
    &__info {
        color: #ccc;
        margin-left: 10px;
        font-size: 12px;
    }
    &__link {
        display: block;
    }
    &__title {
        display: flex;
        align-items: center;
        position: relative;
        padding-right: 100px;
    }
    &__h3 {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
        color: #333;
    }
    &__link:hover &__h3 {
        color: #00c3ff;
    }
    &__content {
        line-height: 18px;
        margin-top: 8px;
        color: #999;
    }
    &__h3,
    &__content {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    &__preview {
        margin-top: 10px;
        overflow: hidden;
        display: inline-flex;
        vertical-align: top;
        position: relative;
    }
    &__preview:hover ~ &__title {
        color: #333;
    }
    &__img {
        display: inline-block;
        width: 120px;
        height: 120px;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 6px;
        position: relative;
        cursor: pointer;
        & + & {
            margin-left: 5px;
        }
    }
    &__thumb {
        opacity: 0;
    }
    &__mark {
        position: absolute;
        top: 5px;
        left: 5px;
        line-height: 20px;
    }
    &__imgnum {
        position: absolute;
        right: 5px;
        bottom: 5px;
        display: flex;
        align-items: center;
    }
    &__mark,
    &__imgnum {
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 2px;
        font-size: 12px;
        color: #fff;
        height: 20px;
        padding: 0 4px;
    }
    &__footer {
        margin-top: 7px;
        display: flex;
    }
    &__topics {
        display: flex;
        flex-wrap: wrap;
        .mmv-topic-label-selector__item {
            margin-top: 5px;
        }
    }
    &__data {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: 24px;
        flex-grow: 1;
        justify-content: flex-end;
        margin-top: 5px;
        &-item {
            display: flex;
            align-items: center;
            line-height: 18px;
            & + & {
                margin-left: 10px;
            }
            span {
                margin-left: 8px;
                color: #ccc;
                display: inline-block;
                width: 50px;
            }
            & .mmv-icon,
            & .mmv-symbol-icon,
            & .mmv-img-icon {
                color: #b2b2b2;
                font-size: 16px;
            }
        }
    }
}
</style>